<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>

    import city from '@/components/common/city_17'
    export default {
        name: 'data_block',
        props:['title','x','y','width','height','r'],
        components:{
            city
        },
        computed:{
            c(){
                return document.getElementById("bolck_border")
            },
            ctx(){
                return this.c.getContext('2d')
            }
        },
        mounted(){
            this.yuanjiao(this.title,this.x,this.y,this.width,this.height,this.r)
            // this.jixingleft(165,35,'#8f8c17','#474e24')
            // this.jixingleft(188,35,'#8f8c17','#474e24')
            // this.jixingleft(211,35,'#23a0f9','#1b536a')
            // this.jixingleft(234,35,'#23a0f9','#1b536a')
            //this.data_block_title()
            //this.drawLine()
            //console.log(this.ctx)
        },
        methods: {
            yuanjiao(title,x,y,w,h,r){
                let xx = parseInt(x)
                this.ctx.beginPath()
                this.ctx.moveTo(x+r, y)
                this.ctx.arcTo(x+135, y, x+145, y+10, 20)
                this.ctx.lineTo(x+165,y+40)
                this.ctx.arcTo(x+w, y+40, x+w, y+h, r)
                this.ctx.arcTo(x+w, y+h, x, y+h, r)
                this.ctx.arcTo(x, y+h, x, y, r)
                this.ctx.arcTo(x, y, x+w, y, r)
                this.ctx.closePath()
                let grd = this.ctx.createLinearGradient(x,y,x,y+h)
                grd.addColorStop(0,"#134d75")
                grd.addColorStop(0.1,"#1ba2ff")
                grd.addColorStop(0.2,"#1ba2ff")
                grd.addColorStop(1,"#134d75")
                this.ctx.strokeStyle = grd
                this.ctx.lineWidth=1;
                this.ctx.stroke()

                
                this.ctx.beginPath()
                this.ctx.moveTo(x+20, y)
                this.ctx.lineTo(x+15,y)
                this.ctx.arcTo(x, y, x, y+15, r)
                this.ctx.lineTo(x,y+20)
                this.ctx.strokeStyle = '#107da1'
                this.ctx.lineWidth = 3;
                this.ctx.stroke()
                
                this.ctx.beginPath()
                this.ctx.moveTo(x+w-20, y+40)
                this.ctx.lineTo(x+w-15,y+40)
                this.ctx.arcTo(x+w, y+40, x+w, y+60, r)
                this.ctx.lineTo(x+w,y+60)
                this.ctx.strokeStyle = '#107da1'
                this.ctx.lineWidth=3;
                this.ctx.stroke()
                
                this.ctx.beginPath()
                this.ctx.moveTo(x+w, y+h-20)
                this.ctx.lineTo(x+w,y+h-15)
                this.ctx.arcTo(x+w, y+h, x+w-15, y+h, r)
                this.ctx.lineTo(x+w-20,y+h)
                this.ctx.strokeStyle = '#107da1'
                this.ctx.lineWidth=3;
                this.ctx.stroke()
                
                this.ctx.beginPath()
                this.ctx.moveTo(x, y+h-20)
                this.ctx.lineTo(x,y+h-15)
                this.ctx.arcTo(x, y+h, x+15, y+h, r)
                this.ctx.lineTo(x+20,y+h)
                this.ctx.strokeStyle = '#107da1'
                this.ctx.lineWidth=3;
                this.ctx.stroke()
                
                let x1 = x+167
                let y1 = y+33

                for(var i=0; i<4; i++){
                    this.ctx.beginPath()
                    this.ctx.moveTo(x1,y1)
                    this.ctx.lineTo(x1+15,y1)
                    this.ctx.lineTo(x1+17,y1+2)
                    this.ctx.lineTo(x1+2,y1+2)
                    this.ctx.lineTo(x1,y1)
                    this.ctx.closePath()
                    if(i<2){
                        this.ctx.strokeStyle = "rgba(219,209,31,0.4)"
                        this.ctx.fillStyle = "rgba(112,116,46,0.6)"
                    }else{
                        this.ctx.strokeStyle = "rgba(36,168,243,0.4)"
                        this.ctx.fillStyle = "rgba(34,87,186,0.6)"
                    }
                    this.ctx.stroke()
                    this.ctx.fill()
                    x1 = x1+22
                }

                this.ctx.font="bold 18px Arial"
                this.ctx.fillStyle = "#fff"
                this.ctx.fillText(this.title,x+20,y+32)
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['直接访问', '邮件营销','联盟广告']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                        textStyle: {
                            color:'#fff'
                        }
                    },
                    xAxis:  {
                        type: 'value',
                        show: false,
                        axisLabel:{
                            color:'#fff'
                        }

                    },
                    yAxis: {
                        type: 'category',
                        axisLabel:{
                            color:'#fff'
                        },
                        data: ['济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市','济南市']
                    },
                    series: [
                        {
                            name: '通过',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                color:"#91c7ae"
                            },
                            label: {
                                show: false
                            },
                            data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '驳回',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                color:"#c23531"
                            },
                            label: {
                                show: false
                            },
                            data: [150, 212, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '待审核',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                color:"#61a0a8"
                            },
                            label: {
                                show: false
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                });
            }
        }
    }
</script>

<style scoped>
    canvas{
        width: 280px;
        height: 750px;
    }
    #data_block{
        float: left;
        margin-left: 20px;
    }
    #myChart{
        position: absolute;
        top: 130px;
        left: 30px;
    }
</style>